<template>
  <div class="bigBox">
    <div class="floatBox">
      <div class="more">
        <el-dropdown>
          <el-button>
            {{ Menu[0].children2[0].title
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in Menu[0].children2"
              v-bind:key="item.id"
              >{{ item.title }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <Search searchText="搜传承人/课程/非遗项目"></Search>
    </div>
    <div class="comMenu">
      <screenMenu v-on:getIdValue="getIdValue(arguments)" :menu="Menu"></screenMenu>
    </div>

    <div class="classVideo" v-if="Menu[fid].children2[cid].childNum > 0" >
     <div class="videoItem" 
     v-for="item in Menu[fid].children2[cid].childNum" 
     v-bind:key='item'
     @click="gotoCourseDetail">
         <Video ></Video>
     </div>
    <div class="_pageination">
        <div class="_contians">
        <!-- <span class="demonstration">完整功能</span> -->
        <!-- <span class="demonstration">显示总数</span> -->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-size="1"
        layout="total, prev, pager, next, jumper"
        :total="100"
        >
    </el-pagination>

        </div>
  </div>
    </div>
    <div v-else class="showNull" @click="test">
        <img src="../assets/images/class/lb2.png" alt="">
        {{fid}}  {{cid}}
    </div>
    

   
  </div>
</template>

<script>
import Video from "../components/Class/_Video.vue";
import Search from "../components/global/search.vue";
import screenMenu from "../components/global/screenMenu.vue";
export default {
  components: { Search, screenMenu, Video },
  data() {
    return {
        fid:0,
        cid:0,
        currentPage4: 4,
      Menu: [
        {
          id: 0,
          title: "课程类型",
          children2: [
            { id: 0, title: "民间文学" ,childNum:0 },
            { id: 1, title: "传统音乐" ,childNum:20},
            { id: 2, title: "传统舞蹈" ,childNum:20},
            { id: 3, title: "传统戏剧" ,childNum:20},
            { id: 4, title: "曲艺" ,childNum:20},
            { id: 5, title: "体育与杂技" ,childNum:20},
            { id: 6, title: "传统美术" ,childNum:20},
            { id: 7, title: "传统技法",childNum:20},
            { id: 8, title: "传统医药" ,childNum:20},
            { id: 9, title: "民俗",childNum:20},
            { id: 10, title: "其他",childNum:20}
          ]
        },
        {
          id: 1,
          title: "付费",
          children2: [
            { id: 0, title: "全部",childNum:20 },
            { id: 1, title: "免费" ,childNum:20},
            { id: 2, title: "付费",childNum:20 }
          ]
        },
        {
          id: 2,
          title: "排序",
          children2: [
            { id: 0, title: "综合排序" ,childNum:20},
            { id: 1, title: "最新伤心" ,childNum:20},
            { id: 2, title: "学习最多" ,childNum:20},
            { id: 3, title: "推荐课程",childNum:20 }
          ]
        }
      ]
    };
  },
  methods:{
      getIdValue (...args){
        this.fid = args[0][0]
        this.cid = args[0][1]

      },
      test(){
          console.log(this.Menu);
      },
      handleSizeChange(val) { console.log(`每页 ${val} 条`); },
      handleCurrentChange(val) { console.log(`当前页: ${val}`); },
      gotoCourseDetail(){
          this.$router.push('/courseDetail')
      }

  }
}
</script>

<style lang="less" scoped>
.bigBox {
  width: 100%;
  .floatBox {
    position: relative;
    width: 100%;
    height: 550px;
    background-image: url(../assets/images/class/lb2.png);
    background-size: 100%;
    .more {
      position: absolute;
      left: 20%;
      bottom: 72%;
      .el-button {
        height: 50px;
        width: 200px;
        border-radius: 30px;
        font-size: 24px;
      }
    }
  }
  .classVideo {
    margin: 0 45px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    .videoItem{
        margin-bottom: 50px;
    }
    ._pageination{
        width: 100%;
        ._contians{
            .el-pagination{
                
                margin: 0 33%;
                /deep/.el-pagination__total {
                    font-size: 25px;
                }
                /deep/.el-pagination__jump{
                    font-size: 25px;
                }
                /deep/.el-icon{
                    font-size: 25px;
                }
                /deep/.el-pager{
                    font-size: 25px;
                    active{
                        color: #fe8c00;
                    }
                }
            }
        }
    }
  }
}
</style>
